<template>
	<view class="checkout">
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				产品详情
			</view>
		</view>
		<view class="checkout_con">
			<template>
				<view class="content">
					<view class="checkout_con_bt">
						<picker @change="bindPickerChange" :value="index" :range="typeList" range-key="name">
							<!-- <view style="padding: 20rpx;background-color: white;">{{ addressList[index].userAddress || '请选择地址' }}</view> -->
							<view class="checkout_con_remark">
								<view class="checkout_bt_label">
									{{currentType.name || '请选择所属分类' }}
								</view>
								<view class="checkout_bt_input">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</picker>
					</view>
					<view class="checkout_con_bt">
						<view class="checkout_con_remark">
							<view class="checkout_bt_label">
								产品名称
							</view>
							<view class="checkout_bt_input">
								<input type="text" v-model="detail.name" placeholder="请输入产品名称"
									placeholder-class="placeholder">
							</view>
						</view>
					</view>
					
					<view class="checkout_con_bt">
						<view class="checkout_con_remark">
							<view class="checkout_bt_label">
								产品价格
							</view>
							<view class="checkout_bt_input">
								<input type="text" v-model="detail.price" placeholder="请输入产品价格"
									placeholder-class="placeholder">
							</view>
						</view>
					</view>
					<view class="checkout_con_bt">
						<view class="checkout_con_remark">
							<view class="checkout_bt_label">
								产品照片
							</view>
							<view class="imgUpload" @click="uploadImg()">
								<span v-if="!detail.goodsImg">选择照片</span>
								<image v-else style="height: 100px;width: 100px;" :src="img" mode="">
								</image>
							</view>
						</view>
					</view>
					
					<view class="pay_btn" v-if="id" style="margin-top: 20px;">
						<button @tap="deleteFn()">删除</button>
					</view>
					
					<view style="margin-top: 20px;">
						<button type="primary" @tap="submit()">提交</button>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>

	import server_url from '../../api/config.js'
	import {
		getProDetail,
		addProduction,
		updateProduction,
		deleteProduction,
		getStoreType
	} from '../../api/api.js'
	export default {
		data() {
			return {
				img:'',
				detail: {
					goodsImg: '',
					name: '',
					price: '',
					categotyId: ''
				},
				domain: server_url,
				id: '',
				remark: '',
				typeList: [],
				index: 0,
				currentType:{
					name: '',
					id:''
				}
			};
		},
		methods: {
			deleteFn() {
				deleteProduction({
					id: this.id
				}).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.backref()
				})
			},
			submit() {
				this.detail.categotyId = this.currentType.id
				if (this.id) {
					updateProduction(this.detail).then(res => {
						uni.showToast({
							title: "操作成功",
							icon: 'none',
							duration: 2000
						})
						this.backref()
					})
				} else {
					addProduction(this.detail).then(res => {
						uni.showToast({
							title: "操作成功",
							icon: 'none',
							duration: 2000
						})
						this.backref()
					})
				}
			},
			bindPickerChange(e) {
				this.index = e.detail.value;
				this.currentType = this.typeList[this.index]
			},
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDetail() {
				getProDetail({
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.img = this.domain + this.detail.goodsImg
					setTimeout(() => {
						let index = this.typeList.findIndex(dd => dd.id == this.detail.categotyId)
						if (index !== -1) {
							this.currentType = this.typeList[index]
						}
					}, 300)
				})
			},
			uploadImg() {
				// 示例代码
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading()
						uni.uploadFile({
							url: this.domain + '/api/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.detail.goodsImg = data.fileName
								this.img = this.domain + data.fileName
								uni.hideLoading()
							}
						});
					}
				});
			},
			getType() {
				getStoreType().then(res => {
					this.typeList = res.data
				})
			}
		},
		onLoad(e) {
			if (e) {
				this.id = e.id
				if (this.id) {
					this.getDetail()
				}
			}
			this.getType()
		},
	}
</script>

<style lang="scss">
	page {
		background: #F9FBFC;
	}

	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
		}
	}

	.checkout_con {
		padding: 0 24rpx;

		.checkout_con_hd {
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.checkout_address {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E8E7E7;
			}

			.checkout_time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;

				.checkout_label {
					display: flex;
					align-items: center;
				}

				.about_time {
					margin-left: 30rpx;
					font-size: 30rpx;
					color: #FFB226;
				}

				.checkout_more {
					font-size: 30rpx;
					color: #2E343A;
					font-weight: 500;
				}
			}

			.checkout_label {
				font-size: 30rpx;
				color: #2E343A;
				font-weight: 500;
			}

			.checkout_more {}
		}

		.checkout_con_bd {
			padding: 32rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-top: 20rpx;

			.checkout_store_hd {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #E8E7E7;

				.checkout_store_name {
					font-size: 30rpx;
					color: #2E343A;
					font-weight: 700;
				}

				.checkout_store_phone {
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.checkout_goods {
				border-bottom: 1rpx solid #E8E7E7;

				.checkout_good {
					position: relative;
					padding: 24rpx 0;
					display: flex;

					.checkout_good_img {
						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}
					}

					.checkout_good_info {
						padding-top: 15rpx;
						margin-left: 24rpx;

						.checkout_good_name {
							font-size: 28rpx;
							color: #2E343A;
							font-weight: 500;
						}

						.checkout_good_type {
							font-size: 24rpx;
							color: #9098A0;
							margin-top: 8rpx;
						}

						.checkout_good_other {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: 0;
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							.checkout_good_price {
								font-size: 32rpx;
								color: #333333;
								font-weight: 500;
							}

							.checkout_good_num {
								font-size: 24rpx;
								color: #9098A0;
							}
						}
					}
				}
			}

			.checkout_money {
				border-bottom: 1rpx solid #E8E7E7;

				.checkout_lunchbox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
				}

				.checkout_delivery {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
				}

				.checkout_money_label {
					font-size: 28rpx;
					color: #9098A0;
					font-weight: 500;
				}

				.checkout_money_price {
					font-size: 28rpx;
					color: #333333;
				}
			}

			.checkout_total_price {
				padding-top: 32rpx;
				text-align: right;
				font-size: 24rpx;
				color: #2E343A;

				text {
					font-size: 32rpx;
					color: #FF2626;
					font-weight: 500;
				}
			}
		}

		.checkout_con_bt {
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-top: 24rpx;

			.checkout_con_remark {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E8E7E7;
			}

			.checkout_con_tableware {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
			}

			.checkout_bt_label {
				color: #2E343A;
				font-weight: 500;
				font-size: 28rpx;
			}

			.checkout_bt_input {
				input {
					text-align: right;
					color: #2E343A;
					font-weight: 500;
					font-size: 28rpx;

					&.placeholder {
						color: #9098A0;
					}
				}

			}
		}

		.checkout_pay {
			position: relative;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			border-radius: 100rpx;
			background-color: #3A3635;
			padding-left: 40rpx;

			.checkout_pay_price {
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: 500;
			}

			.checkout_pay_btn {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #fff;
				top: 0;
				right: 0;
				width: 192rpx;
				height: 100rpx;
				border-top-right-radius: 100rpx;
				border-bottom-right-radius: 100rpx;
				background-color: #2588FF;
			}
		}
	}
</style>
